<template>
  <div>
    <!--
 生命周期
     创建期
        beforeCreate:创建前，实例化还没有完成，不能使用实例对象(this)
        created：创建后，实例化完成，可以访问实例对象(data,methods),这个时候渲染还没有完成，不可以访问vue渲染后的dom
     渲染期
        beforeMount:渲染前，解析（读取）了template,但还没有完成渲染
        mounted:渲染后，初次渲染完成，第一个可以访问vue渲染后的dom的生命周期
     更新期
        beforeUpdate:更新前(页面上使用的相关数据已修改，但渲染没有完成),
        updated:更新后(页面上使用的相关数据已修改，且渲染完成)
     销毁期
        beforeDestroy:销毁前，什么都可以访问，常用于做一些清理工作(setInterval..)
        destroyed:销毁后,中断渲染，不可以访问vue渲染后的dom,可以访问data,methods
     缓存期(keep-alive)
     第一次渲染就会执行
        activated:激活时，页面显示时
        deactivated:隐藏时,页面切换时

-->
    <h3 ref="h3">{{ msg }}</h3>
    <div ref="num">{{ num }}</div>
    <button @click="btnClick">点击修改num</button>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      num: 1
    }
  },
  created () {
    this.$nextTick(() => {
      console.log(this.$refs.h3)
    })
    // setTimeout(() => {
    //   console.log(this.$refs.h3)
    // }, 1000)
    // console.log(document.querySelector('#xxx'))
  },
  beforeUpdate () {
    console.log('beforeUpdate', this.$refs.num.innerHTML)
  },
  updated () {
    console.log('updated', this.$refs.num.innerHTML)
  },
  methods: {
    btnClick () {
      this.num++
    }
  }
}
</script>
<style></style>
